<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>举报管理</el-breadcrumb-item>
      <el-breadcrumb-item>举报列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-button type="primary" @click=" searchResource(-1)">全部</el-button>
          <el-button type="danger" @click=" searchResource(0)">未处理</el-button>
          <el-button type="warning" @click=" searchResource(1)">处理中</el-button>
          <el-button type="success" @click=" searchResource(2)">已处理</el-button>
        </el-col>
      </el-row>
      <el-table :data="resourceList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="举报人" prop="reportUserName"></el-table-column>
        <el-table-column label="举报时间" prop="reportTime"></el-table-column>
        <el-table-column label="举报原因">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>举报人: {{ scope.row.reportUserName }}</p>
              <p>举报原因: {{ scope.row.reportText }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">详情</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status==0">未处理</span>
            <span v-else-if="scope.row.status==1">处理中</span>
            <span v-else-if="scope.row.status==2">已处理</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handItView(scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.pageNum"
          :page-sizes="[2, 4 , 6, 12]"
          :page-size="this.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
    <!--处理-->
    <el-drawer
        title="处理举报"
        :visible.sync="HandleVisible"
        :with-header="false">
      <h4>举报人</h4>
      <span>{{this.HandleForm.reportUserName}} id: {{this.HandleForm.reportUserId}} </span>
      <br>
      <span>被举报资源id: {{this.HandleForm.resourceId}}</span>
      <h4>举报原因:</h4>
      <h5>{{this.HandleForm.reportText}}</h5>
      <img :src="imgPath+this.HandleForm.imgUrl" style="width: 250px; height: 205px">
      <el-switch
          style="display: block"
          v-model="lock"
          active-text="锁定资源"
          inactive-text="不锁定资源">
      </el-switch>
      <el-button type="primary" @click="submit()">提 交</el-button>
      <el-button @click="closef()">取 消</el-button>
    </el-drawer>

  </div>
</template>
<script>
export default {
  data() {
    return {
      statue:'-1',
      lock:false,
      HandleVisible: false,
      pageNum: 1,
      pageSize: 6,
      resourceList: [],
      total: 9,
      imgPath:this.$baseUrl.imgUrl+'imgs/',
      HandleForm: {
      },
    };
  },
  methods: {
    submit(){
      if (this.lock==true){
        let url=this.$baseUrl.baseUrl+'resource/lock'
        this.$axios.get(url,{
          params:{
            id:this.HandleForm.resourceId,
            status:1
          }
        }).then((resp)=>{
          if (resp.data.code==200){
            this.$message.success(resp.data.msg)
          }
        })
      }
      this.HandleVisible=false
      let url=this.$baseUrl.baseUrl+'report/updateStatus'
      this.$axios.delete(url,{
        params:{
          ids:this.HandleForm.id,
          fromStatus:1,
          toStatus:2
        }
      }).then((resp)=>{
        if (resp.data.code==200){
          this.message.success(resp.data.msg)
        }
      })
    },
    closef(){
      this.HandleVisible=false
    },
    handItView(row){
      this.HandleVisible=true
      this.HandleForm=row

    },
    //提交处理
    editUser(){

    },
    getresourceList() {
      let url=this.$baseUrl.baseUrl+"report/list"
      this.$axios.get(url,{
        params:{
          status:this.statue,
          reportType:2,
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          reportUserId:this.reportUserId
        }
      }).then((resp)=>{
        if (resp.data.code==200){
          this.resourceList=resp.data.data.list
          this.pageNum=resp.data.data.pageNum
          this.pageSize=resp.data.data.pageSize
          this.total=resp.data.data.total
        }else {
          alert(resp.data.msg)
        }
      })


    },
    searchResource(status) {
      this.statue=status
      this.getresourceList();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getresourceList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getresourceList();
    },
    //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
    getRoleNames(arr) {
      if (!arr) return;
      let roleNameArr = new Array();
      for (let i = 0; i < arr.length; i++) {
        roleNameArr.push(arr[i].name);
      }
      return roleNameArr.join(",");
    },

    reloadData() {
      this.searchResource(-1);
    }
  },
  created() {
    this.reloadData();
  }
};
</script>
<style lang="less" scoped>
</style>